<style scoped lang="scss">
.div1 {
    display: flex;
    align-items: center;
    .icon1 {
        font-size: 30px;
    }
    .search {
        flex: 1;
    }
}
</style>
<template>
    <div style="width: 100%;overflow: hidden;">
        <div class="div1">
            <van-icon class="icon1" name="arrow-left" @click="$router.go(-1)" />
            <van-search v-model="searchValue" class="search" show-action placeholder="请输入搜索关键词" @search="onSearch" shape="round">
                <template #action>
                    <div @click="onSearch">搜索</div>
                </template>
            </van-search>
        </div>
        <div v-if="isSearch">
            <dl v-for="(item,index) in listData" :key="index" style="display: flex;">
                <dt>
                    <img style="width: 100px;height: 100px;" :src="item.shopImage" alt="">
                </dt>
                <dd style="margin-left: 10px;line-height: 30px;">
                    <h3>{{ item.shopName }}</h3>
                    <span>{{ item.shopDescription }}</span>
                </dd>
            </dl>
        </div>
        <div style="padding: 10px;" v-else>
            <div style="display: flex;justify-content: space-between;align-items: center;">
                <h3>历史记录</h3>
                <span @click="history = []">X</span>
            </div>
            <div style="height: 70px;overflow: hidden;">
                <van-space wrap>
                    <van-tag v-for="(v, i) in history" :key="i">{{ v }}</van-tag>
                </van-space>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { request } from '@/axios/request';
import { reactive, ref,watch } from 'vue';
import { getList } from '@/api';

interface ListState{
    shopName:string
    shopDescription:string
    shopSellCount:number
}

const listData=ref<ListState[]>([])
const config = reactive({
    currentPage: 1,
    pageSize: 10
})

const searchValue = ref('')
watch(searchValue,()=>{
    getListData()
})

    const getListData=async()=>{
        const res=await getList({...config,searchValue:searchValue.value})
        console.log(res.data.data);
        listData.value=res.data.data.data
    }
    getListData()

const history = ref(JSON.parse(localStorage.getItem('history') || '[]'))

const isSearch = ref(false)


const onSearch=()=>{
    history.value=[...new Set([searchValue.value,...history.value])]
    getListData()
    isSearch.value=true
}
watch(history,()=>{
    localStorage.setItem('history',JSON.stringify(history.value))
})

</script>